<template>
	<view>
		<canvas :canvas-id="id" :id="id" :style="{width:width+'px',height:height+'px'}"></canvas>
	</view>
</template>

<script>
	import {
		isEmpty
	} from '@/utils/index';
	export default {
		props: {
			id: {
				type: String,
				default: ''
			},
			width: {
				type: Number,
				default: 0
			},
			height: {
				type: Number,
				default: 0
			},
			radarData: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		watch: {
			radarData(newValue) {
				console.log('radar', 'watch');
				this.drawTest();
			}
		},
		data() {
			return {}
		},
		mounted() {

		},

		methods: {
			drawTest() {
				if (isEmpty(this.radarData)) {
					return;
				}
				const {
					width,
					height,
					id
				} = this;
				let ctx = uni.createCanvasContext(id, this);
				ctx.setFillStyle("#ff0000");
				ctx.fillRect(0, 0, width, height);
				ctx.draw();
				console.log('draw');


			},
			drawStripe() {
				const {
					names
				} = this.radarData;
				const {
					width,
					height
				} = this;
				const angel = 2 * Math.PI / names.length;
				const minWidth = Math.min(width, height);
				//将原点移动到正中心
				const centerX = width / 2;
				const centerY = height / 2;
				ctx.translate(centerX, centerY);
				names.forEach((item, index) => {
					
				});
			}
		}
	}
</script>

<style lang="scss" scoped>


</style>
